<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
</head>
<!-- 
    反思:


 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul,
    li {
        list-style: none;
    }

    ul {
        width: 190px;
        height: 240px;
        background-color: aqua;
    }

    ul>li{
        width: 33.33%;
        height: 60px;
        float: left;

    }

    ul>li>i {
        width: 24px;
        height: 30px;
        margin: 0 auto;
        display: block;
        background-color: blue;
    }
</style>

<body>
    <ul class="box">
        <!-- li 标签 -->
    </ul>

    <script>
        var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

        var box = document.querySelector('.box')

        for (var i = 0; i < 12; i++) {
            var li = document.createElement('li');
            box.appendChild(li);

        }

        var lis = document.querySelectorAll('.box>li')
        for (var i = 0; i < lis.length; i++) {
            var ii = document.createElement('i');
            lis[i].appendChild(ii);
            var pp = document.createElement('p');
            lis[i].appendChild(pp);
        }

        var ps = document.querySelectorAll('p')
        var is = document.querySelectorAll('i')
        for (var i = 0; i < ps.length; i++) {
            ps[i].innerHTML = data[i]
        }

        for (var i = 0; i < is.length; i++) {
            is[i].style.background = 'url(images/sprite.png) no-repeat 0 -' + i * 44 + 'px'
        }

    </script>


    <!--   老师例子
    ##########################################################################
 -->
    <ul id="tc">
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>
        <li>
            <i></i>
            <p>企业购</p>
        </li>

    </ul>
    <script>
        var ll = document.querySelectorAll('#tc>li');
        for (var i = 0; i < ll.length; i++) {
            ll[i].children[0].style.background = 'url(images/sprite.png) no-repeat 0 -' + i * 44 + 'px'
        }
    </script>

</body>


</html>